<!-- 底部导航栏 -->
<template>
  <div class="footer-main">
    <van-tabbar route active-color="#CF5559" inactive-color="#646566">
      <van-tabbar-item replace to="/">
        <span>首页</span>
        <template #icon="">
          <van-icon class="iconfont" class-prefix="icon" name="shouye" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/topic" icon="search">
        <span>专题</span>
        <template #icon="">
          <van-icon class="iconfont" class-prefix="icon" name="zhuanti" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/category" icon="friends-o">
        <span>分类</span>
        <template #icon="">
          <van-icon class="iconfont" class-prefix="icon" name="fenlei" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/car" icon="setting-o">
        <span>购物车</span>
        <template #icon="">
          <van-icon class="iconfont" class-prefix="icon" name="gouwuche" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/mine" icon="setting-o">
        <span>我的</span>
        <template #icon="">
          <van-icon class="iconfont" class-prefix="icon" name="wode" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem, Icon } from "vant";

Vue.use(Tabbar).use(TabbarItem).use(Icon);
export default {
  data() {
    return {};
  },
  created() {},
};
</script>
<style lang='scss' scoped>
</style>